<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-select class="filter-item" v-model="listQuery.courseId" clearable placeholder="课程">
            <el-option
                v-for="item in courses"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
      </el-select>
      <el-select class="filter-item" v-model="listQuery.state" clearable placeholder="状态">
          <el-option
                v-for="item in states"
                :key="item.key"
                :label="item.value"
                :value="item.key">
            </el-option>
      </el-select>
      <el-button class="filter-item" style="margin-left: 10px;" @click="getList" type="primary" icon="el-icon-search">{{$t('table.search')}}</el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit >
      <el-table-column min-width="100" align="center" :label="$t('sign.name')">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="50" align="center" :label="$t('sign.age')">
        <template slot-scope="scope">
          <span>{{ scope.row.age }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100" align="center" :label="$t('sign.mobile')">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100" align="center" :label="$t('sign.course')">
        <template slot-scope="scope">
          <span>{{ scope.row.course.name }}</span>
        </template>
      </el-table-column>

       <el-table-column min-width="100" align="center" :label="$t('sign.discipline')">
        <template slot-scope="scope">
          <span>{{ scope.row.discipline }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100" align="center" :label="$t('sign.cycle')">
        <template slot-scope="scope">
          <span>{{ scope.row.cycle }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100" align="center" :label="$t('sign.yhpy_level')">
        <template slot-scope="scope">
          <span>{{ scope.row.yhpyLevel }}</span>
        </template>
      </el-table-column>

       <el-table-column min-width="100" align="center" :label="$t('sign.state')">
        <template slot-scope="scope">
          <span>{{ scope.row.state === 1 ? '已支付':'未支付' }}</span>
        </template>
      </el-table-column>
    </el-table>

       <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { signs } from '@/api/sign'
import { courses } from '@/api/course'

export default {
  name: 'services',
  data() {
    return {
      tableKey: 0,
      list: [],
      courses: [],
      states: [{
        key: 0,
        value: '未支付'
      }, {
        key: 1,
        value: '已支付'
      }],
      total: 0,
      listLoading: true,
      listQuery: {
        courseId: undefined,
        state: undefined,
        page: 1,
        size: 10
      }
    }
  },
  filters: {
  },
  created() {
    this.loadCourses()
    this.getList()
  },
  methods: {
    loadCourses() {
      courses().then(res => {
        this.courses = res.data.data
      })
    },
    getList() {
      this.listLoading = true
      signs(this.listQuery).then(response => {
        this.list = response.data.data
        this.listQuery.page = response.data.page.pageNum === 0 ? 1 : response.data.page.pageNum
        this.listQuery.size = response.data.page.pageSize
        this.total = response.data.page.total
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.listQuery.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    }
  }
}
</script>
